<?php
session_start();
date_default_timezone_set('PRC'); 	
include "./public/common/config.php";	
$other_id = $_GET['other_id'];
$_SESSION['currentOther'] = $other_id;
$user_id = isset($_SESSION['home_userid'])?$_SESSION['home_userid']:0;

$sqlChat = "
(select chat.send_id,chat.income_id,chat.content,chat.create_time,user.username,user.img from chat left join user on(chat.send_id = user.id) where chat.send_id = {$other_id} and chat.income_id = {$user_id})
union all
(select chat.send_id,chat.income_id,chat.content,chat.create_time,user.username,user.img from chat left join user on(chat.send_id = user.id) where chat.send_id = {$user_id} and chat.income_id = {$other_id})
order by create_time
";
//echo $sqlChat;exit;
$resChat = mysql_query($sqlChat);

?>
<style type="text/css">
	.top_cont {
	    min-height: 260px;
	    margin-top: 70px;
	}
	.cont {
	    background-color: #FFF;
	    border-radius: 4px;
	    padding: 15px;
	    margin-bottom: 20px;
	    background-color: gainsboro;
	}
	.cont img{
		width: 50px;
		height: 50px;
	}
	.cont>div{
		display: flex;
		align-items: center;
	}
	.cont>p{
		text-align: center;
	}
	.cont>p>span{
		display: inline-block;
		padding: 5px 10px;
		background-color: darkgray;
		color: white;
		border-radius: 5px;
	}
	.cont>div p{
		position: relative;
		padding: 10px;
		border-radius: 10px;
	}
	.cont_item_left p:before{
		content: "";
		position: absolute;
		width: 0px;
		height: 0px;
		left: -10px;
		top: 15px;
		/*background-color: white;*/
		border-right: 5px solid white;
		border-bottom: 5px solid transparent;
		border-top: 5px solid transparent;
		border-left: 5px solid transparent;
	}
	
	.cont_item_left p{
		background-color: white;
		margin-left: 10px;
	}
	.cont_item_right{
		flex-direction: row-reverse;
	}
	
	.cont_item_right p:after{
		content: "";
		position: absolute;
		width: 0px;
		height: 0px;
		right: -10px;
		top: 15px;
		/*background-color: white;*/
		border-right: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-top: 5px solid transparent;
		border-left: 5px solid lawngreen;
	}
	
	.cont_item_right p{
		background-color: lawngreen;
		margin-right: 10px;
	}
</style>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript">
	function chatOther(){
		$.post("chat/manage.php",
	    {
	    },
        function(data,status){
        	if(data.status){
        		$(".chat_main").append(data.str);
        	}	
	    },"json");
	}
	
	$(function(){
		setInterval("chatOther()",1000);
		$('#send').click(function(){
			$.post("chat/send.php",
	        {
	        	content:$('#message input').val()
	        },
            function(data,status){
        	    	
	        },"json");
		});
	});
</script>
<div class="cont top_cont chat_main">
<?php
while($rowChat = mysql_fetch_assoc($resChat)){
	$class = 'cont_item_left';
	if($rowChat['send_id'] == $user_id){
		$class = 'cont_item_right';
	}
?>
	<p><span><?php echo date("Y-m-d H-i-s", $rowChat['create_time'])?></span></p>
	<div class="<?php echo $class?>">
		<img src="img/<?php echo $rowChat['img']?>"/>
		<p>
			<?php echo $rowChat['content']?>
		</p>
	</div>
<?php
}
?>

</div>
<span id="message">
	<input type="text" id="" value="" />
	<span id="send">
		发送
	</span>
</span>